import { defineComponent, ref } from "vue"

export default defineComponent({
	name: "DialogView",
	setup() {
		const visible1 = ref(false)
		const visible2 = ref(false)
		const visible3 = ref(false)
		return () => (
			<div class="dialog-view-container">
				<h1 class="row-title">对话框例示</h1>
				<div class="row">
					<Chen-Button
						type="primary"
						onClick={() => {
							visible1.value = true
						}}
					>
						示例一
					</Chen-Button>
					<Chen-Dialog
						v-model:visible={visible1.value}
						title="我是标题"
						width="30vw"
						top="30vh"
						onClose={() => {
							console.log("对话框1关闭了")
						}}
					>
						{{
							default: () => "这是一个基本对话框",
						}}
					</Chen-Dialog>
					<Chen-Button
						type="warning"
						onClick={() => {
							visible2.value = true
						}}
					>
						示例二
					</Chen-Button>
					<Chen-Dialog
						v-model:visible={visible2.value}
						title="提示二"
						width="500px"
						top="200px"
						onClose={() => {
							console.log("对话框2关闭了")
						}}
					>
						{{
							default: () => "这是自定义宽度，离上边的距离定制化",
						}}
					</Chen-Dialog>
					<Chen-Button
						type="success"
						onClick={() => {
							visible3.value = true
						}}
					>
						示例三
					</Chen-Button>
					<Chen-Dialog
						v-model:visible={visible3.value}
						title="提示三"
						width="30vw"
						top="20vh"
						onClose={() => {
							console.log("对话框3关闭了")
						}}
					>
						{{
							default: () => "这是带确认和取消的对话框",
							footer: () => (
								<>
									<Chen-Button
										type="warning"
										onClick={() => {
											visible3.value = false
										}}
									>
										取消
									</Chen-Button>
									<Chen-Button type="primary" onClick={() => {}}>
										确认
									</Chen-Button>
								</>
							),
						}}
					</Chen-Dialog>
				</div>
			</div>
		)
	},
})
